/*
 * @Author: jiu yin
 * @Date: 2024-05-14 15:03:36
 * @LastEditTime: 2024-05-17 18:59:12
 * @LastEditors: jiu yin zhen jing
 * @FilePath: \studio-web-admin\src\comment\Print\index.tsx
 * jiu
 */
import logoIcon from "@/assets/image/logoIcon.png";
import { QRCode, Divider } from "antd";
import Print from "print-js";
import "./index.css";
import { useState, useRef, useEffect } from "react";
import html2canvas from "html2canvas";

export default function index(props: any) {
	const { print_list, printOk } = props;

	useEffect(() => {
		img_arr_fn().then(async res => {
			console.log("打印", res);
			await print(res);
			printOk();
		});
	}, [print_list]);

	const img_arr_fn = async () => {
		if (print_list.length == 0) return [];
		let img_arr = [] as any;
		let promise_arr = print_list.map((item: any, index: number) => print_el(index, img_arr));
		await Promise.all(promise_arr);
		return img_arr;
	};

	const print_el = async (index: number, img_arr: any) => {
		let el = document.querySelector("#printJS_form" + index) as HTMLDivElement;
		// 将元素转换为canvas对象
		let canvas = await html2canvas(el, { scale: 2 });
		let pageData = canvas.toDataURL("image/jpeg", 2.0);
		img_arr.push(pageData);
	};

	const print = async (img_arr: any[]) => {
		if (img_arr.length == 0) return console.log("没有打印数据");
		await Print({
			printable: img_arr,
			type: "image",
			base64: true,
			style: "@page { size: 72mm 297mm; margin: 0; }",
			targetStyles: ["*"], // 允许打印所有样式属性
		});
	};

	return (
		<section>
			{print_list.length
				? print_list.map((item: any, index: number) => (
						<div className="p-10px  w-500px c-#000 font-1000 " id={`printJS_form${index}`} key={index}>
							<div className="text-28px flex items-center">
								<img src={logoIcon} alt="" className="w-60px h-60px mr-7px" />
								<span>元梦MR-沉浸式互动体验馆</span>
							</div>

							<section className="mt-20px flex flex-col items-center">
								<p className="text-30px">{item.goods_name}</p>
								<p className="text-28px font-700 mt-13px">入场票</p>
								<div className="mt-25px">
									<QRCode value={item.ticket_url} size={280} />
								</div>
								<p className="text-30px mt-18px">票码</p>
								<p className="text-30px mt-18px"> {item.ticket_no}</p>

								<p className=" text-24px mt-8px">打印时间：{new Date().toLocaleString()}</p>
							</section>

							<section className="mt-38px flex flex-col items-center">
								<p className="text-30px ">#入场前请先配置您的角色信息#</p>
								<p className="text-24px mt-10px text-center">
									使用微信或元梦空间APP扫描上方二维码根据页面提示完成角色配置
								</p>
								<p className="text-24px mt-10px text-center">或使用现场服务机扫描上方二维码进行角色配置</p>
							</section>

							<Divider dashed></Divider>

							<section className="flex justify-center">
								<dl className="w-500px">
									<dt className="text-20px ml-10px mb-11px">入场体验流程：</dt>
									<dd className="text-28px ml-10px mb-3px">① 配置您的空间场景角色信息</dd>
									<dd className="text-28px ml-10px mb-3px">② 排队验票进场</dd>
									<dd className="text-28px ml-10px mb-3px">③ 听从工作人员引导佩戴调试设备</dd>
									<dd className="text-28px ml-10px mb-3px">④ 跟随内容引导开启沉浸式互动感官体验</dd>
								</dl>
							</section>

							<Divider dashed></Divider>

							<section className="flex flex-col items-center text-28px gap-3px text-center">
								<p>本票据不记名不退换，仅限当日使用，过期自动作废</p>
								<p>入场前请妥善保管，如损坏请联系工作人员</p>
								<p>www.ym2meta.com</p>
								<p>400-009-7509</p>
							</section>
						</div>
				  ))
				: null}
		</section>
	);
}
